<template>
    <div class="bigBox" ref="imgDom">
        <div class="header">
            <a-space>
                <a-input style="width: 120px" size="small" v-model:value="words" placeholder="关键词"
                    @change="searchWords" />
            </a-space>
            <b>
                <a-space>
                    <a-input-search type="number" style="width: 120px" size="small" v-model:value="startPage"
                        placeholder="起始页" enter-button @search="onSearch" />
                    <i>页数：{{ page }}</i>
                    <i>总页数：{{ totalPage }}</i>
                    <i>总数：{{ total }}</i>
                    <a-radio-group v-model:value="type" @change="changeType" button-style="solid" size="small">
                        <a-radio-button :value="1">简易</a-radio-button>
                        <a-radio-button :value="2">精美</a-radio-button>
                    </a-radio-group>
                </a-space>
            </b>
        </div>
        <wc-waterfall gap="10" cols="3" class="img">
            <photo-provider :default-backdrop-opacity="0.5">
                <div v-for="item in imgData" v-show="item.show" class="item">
                    <photo-consumer style="width: 100%" intro="" :src="item.src">
                        <img v-lazy="item.src" alt="" @error="() => item.show = false">
                    </photo-consumer>
                    <a-button @click="setWallpaper(item.src)" type="primary" size="small" class="btn">设为壁纸</a-button>
                </div>
            </photo-provider>
        </wc-waterfall>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { getBaiduImg } from '@/api/index'
import _ from 'lodash'
import { setLocalData } from '@/utils/tool'
import { message } from 'ant-design-vue'
const imgData: any = ref([])
const imgDom: any = ref(null)
const page = ref(1)
const totalPage = ref(0)
const startPage = ref()
const size = ref(20)
const type = ref(2)
const words = ref('')
const total = ref(0)
const loading = ref(false)
const getData = async () => {
    loading.value = true
    const obj = {
        id: 10000732,
        key: 'b9bea682d5bbf442f27ba8637d558707',
        words: words.value || '4k动漫电脑壁纸',
        page: page.value,
        limit: size.value,
        type: type.value
    }
    try {
        const result = await getBaiduImg(obj)
        loading.value = false
        result.res.forEach((el: any) => {
            const obj = {
                src: el,
                show: true
            }
            imgData.value.push(obj)
        });
        total.value = result.count
        totalPage.value = result.maxpage
    } catch (error) {
        loading.value = false
        console.log(error);
    }
}

// 滚动事件处理函数  
const handleScroll = _.throttle(() => {
    if (imgDom.value && !loading.value) {
        const containerHeight = imgDom.value.scrollHeight;
        const scrollTop = imgDom.value.scrollTop;
        const clientHeight = imgDom.value.clientHeight;
        // 计算滚动条距离底部的距离  
        const scrollDistanceFromBottom = containerHeight - (scrollTop + clientHeight);
        if (scrollDistanceFromBottom <= 50 && page.value < totalPage.value) {
            page.value++
            getData()
        }
    }
}, 500)
const onSearch = () => {
    // 边界条件处理：确保 startPage 在合法范围内
    if (!startPage.value) startPage.value = 1
    startPage.value = Math.max(1, Math.min(startPage.value, totalPage.value));
    page.value = startPage.value;
    imgData.value = [];
    getData();
}
const searchWords = _.debounce(() => {
    page.value = 1
    imgData.value = []
    getData()
}, 1000)
const changeType = () => {
    page.value = 1
    imgData.value = []
    getData()
}
const setWallpaper = (url: string) => {
    setLocalData('LOGIN_IMG', `url(${url})`)
    message.success('设置成功！')
}
onMounted(() => {
    getData()
    if (imgDom.value) {
        imgDom.value.addEventListener('scroll', handleScroll);
    }
})

// 在组件卸载时移除事件监听器  
onUnmounted(() => {
    if (imgDom.value) {
        imgDom.value.removeEventListener('scroll', handleScroll);
    }
});  
</script>
<script lang="ts">
export default {
    name: 'baidu',
}
</script>
<style scoped lang="scss">
.bigBox {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    @include scroll-bar();

    .header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        position: sticky;
        top: 0;
        left: 0;
        background-color: var(--backColor);
        z-index: 10;

        .item {
            padding: 2px 5px;
            border-radius: 3px;
            background-color: rgba(128, 128, 128, 0.522);
            color: white;
            cursor: pointer;
        }

        .active {
            background-color: var(--themeColor);
        }
    }

    .img {
        position: relative;

        .item {
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 1px 1px 3px 0px var(--themeColor);

            img {
                width: 100%;
                cursor: pointer;
            }

            .btn {
                position: absolute;
                bottom: 0;
                right: 0;
                z-index: 5;
                display: none;
            }

            &:hover {
                .btn {
                    display: block;
                }
            }
        }
    }
}
</style>